<template>
	<view class="login-input" :class="{'login-input-disable': disabled}">
		<text v-if="prefixIcon" :class="prefixIcon" class="iconfont login-input-icon"></text>
		<input v-show="!showPwd" v-model="value" class="login-input-main" placeholder-style="color: #D1D1D1" 
			:type="type"
			:placeholder="placeholder"
			:disabled="disabled"
			:style="{marginLeft: prefixIcon ? '26rpx' : 0,marginRight: type === 'password' ? '26rpx' : 0}"/>
		<input v-show="showPwd" v-model="value" type="text"  class="login-input-main" placeholder-style="color: #D1D1D1"
			:placeholder="placeholder"
			:disabled="disabled"
			:style="{marginLeft: prefixIcon ? '26rpx' : 0,marginRight: '26rpx'}"/>
		<text v-if="type === 'password'" 
			:class="type === 'password' ? (showPwd ? 'icon-eye1' : 'icon-eye') : ''" 
			class="login-input-icon iconfont" @click="toggleShowPwd"></text>
		<text v-if="suffixText" class="login-input-suffix-text" @click="$emit('clickSuffixText')">
			{{suffixText}}
		</text>
	</view>
</template>

<script>
	import { ref,watch } from "vue";
	export default {
		name:"LoginInput",
		emits: ['change','clickSuffixText'],
		props:{
			prefixIcon: String,
			suffixText: String,
			placeholder: String,
			disabled: Boolean,
			type: String
		},
		setup(props,ctx){
			const showPwd = ref(false);
			const value = ref('');
			watch(value,(val) => {
				ctx.emit('change',val);
			});
			function toggleShowPwd(){
				showPwd.value = !showPwd.value;
			}
			return {
				showPwd,
				value,
				toggleShowPwd,
				setValue(newValue){
					value.value = newValue;
				}
			};
		}
	}
</script>

<style lang="scss">
.login-input{
	display: flex;
	align-items: center;
	padding:26rpx 56rpx;
	border-radius: 50rpx;
	background-color: $bg-color-3;
	color: $color-primary;
}

.login-input-disable{
	opacity: 0.5;
}
.login-input-icon{
	font-size: 40rpx;
}
.login-input-main{
	font-size: 32rpx;
	flex: 1 1 0%;
}
.login-input-suffix-text{
	color: $color-primary;
	font-size: 32rpx;
}
</style>
